(function () {
    "use strict";
    const selectBox = document.querySelector('.selectBox'),
        searchInp = document.querySelector('.searchInp'),
        tbody = document.querySelector('.tableBox tbody'),
        pageBox = document.querySelector('.pageBox');

    // 获取传递的lx值 & 分页相关数据
    let { lx = 'my' } = Qs.parse(location.search.replace('?', '')),
        limit = 12,
        page = 1,
        totalPage = 0;

    // 绑定客户列表和分页
    const binding = async function binding() {
        // 获取数据
        let customerList = [];
        try {
            let result = await http.get('/customer/list', {
                params: {
                    lx,
                    limit,
                    page,
                    type: selectBox.value,
                    search: searchInp.value.trim()
                }
            });
            if (+result.code === 0) {
                customerList = result.data;
                totalPage = result.totalPage;
            }
        } catch (_) { }

        // 绑定数据:表格
        let str = ``;
        customerList.forEach(item => {
            let { id, name, sex, email, phone, QQ, weixin, type, address, userName } = item;
            str += `<tr>
                <td class="w8">${name}</td>
                <td class="w5">${+sex === 0 ? '男' : '女'}</td>
                <td class="w10">${email}</td>
                <td class="w10">${phone}</td>
                <td class="w10">${weixin}</td>
                <td class="w10">${QQ}</td>
                <td class="w5">${type}</td>
                <td class="w8">${userName}</td>
                <td class="w20">${address}</td>
                <td class="w14">
                    <a href="customeradd.html?customerId=${id}">编辑</a>
                    <a href="javascript:;" customerId="${id}">删除</a>
                    <a href="visit.html?customerId=${id}">回访记录</a>
                </td>
            </tr>`;
        });
        tbody.innerHTML = str;

        // 绑定数据:分页
        str = ``;
        if (totalPage > 1) {
            if (page > 1) str += `<a href="javascript:;">上一页</a>`;
            str += `<ul class="pageNum">`;
            new Array(totalPage).fill(null).forEach((_, index) => {
                str += `<li class="${page === (index + 1) ? 'active' : ''}">
                    ${index + 1}
                </li>`;
            });
            str += `</ul>`;
            if (page < totalPage) str += `<a href="javascript:;">下一页</a>`;
        }
        pageBox.innerHTML = str;
    };
    binding();

    // 数据筛选
    selectBox.onchange = searchInp.oninput = utils.throttle(function () {
        page = 1;
        binding();
    });

    // 分页管控
    pageBox.onclick = function (ev) {
        let target = ev.target,
            targetTag = target.tagName;
        if (targetTag === 'A') {
            if (target.innerHTML === '上一页') {
                page--;
            } else {
                page++;
            }
            binding();
            return;
        }
        if (targetTag === 'LI') {
            let temp = +target.innerHTML;
            if (temp === page) return;
            page = temp;
            binding();
        }
    };
})();